.amplify-storage-browser {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  position: relative;
  padding: var(--amplify-space-small);
  gap: var(--amplify-space-small);

  /* Error boundary */
  &__error {
    background-color: var(--amplify-colors-background-error);
    color: var(--amplify-colors-font-error);
    padding: var(--amplify-space-medium);
  }

  &__navigation,
  &__exit {
    align-self: flex-start;
  }

  &__title {
    font-weight: var(--amplify-font-weights-bold);
    font-size: var(--amplify-font-sizes-large);
  }

  &__controls,
  &__summary,
  &__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--amplify-space-medium);
  }

  &__footer {
    justify-content: flex-end;
  }

  &__search {
    display: flex;
    flex-direction: row;
    flex: 1;
    gap: var(--amplify-space-small);
  }

  &__pagination {
  }

  &__data-refresh {
  }

  &__menu {
  }

  &__drop-zone {
    flex: 1;
    overflow: hidden;
    position: relative;
    width: 100%;
    display: block;
  }

  &__data-table {
    overflow: auto;
    position: relative;
    border-width: var(--amplify-border-widths-small);
    border-style: solid;
    border-color: var(--amplify-colors-border-primary);
    border-radius: var(--amplify-radii-small);
    width: 100%;
    height: 100%;
    display: block;
  }

  &__table {
    width: 100%;
    position: relative;

    // <thead>
    &-head {
      position: sticky;
      top: 0;
      background: var(--amplify-colors-background-primary);
      box-shadow: var(--amplify-shadows-small);
      z-index: 2;
    }

    // <tbody>
    &-body {
    }

    // <tr>
    &-row {
      &_active {
        background-color: var(--amplify-colors-background-info);
      }
    }

    // <th>
    &-header {
      border: none;
      padding: var(--amplify-space-xxxs);
    }

    // <td>
    &-data-cell {
      padding: var(--amplify-space-xxxs);

      &:first-child,
      &:last-child {
        border-inline-start-width: 0;
        border-inline-end-width: 0;
      }

      &-icon {
        vertical-align: middle;
        margin-inline-end: var(--amplify-space-xs);
      }
    }

    &-header--select,
    &-data--select,
    // TODO: genericize
    &-header--download,
    &-data--download,
    &-data--cancel {
      text-align: center;
    }

    &-data--size,
    &-header--size {
      text-align: end;
    }

    &-button-data-cell,
    &-date-data-cell,
    &-number-data-cell,
    &-text-data-cell,
    &-sort-header {
      display: flex;
      width: 100%;
      gap: var(--amplify-space-xxs);
      padding: var(--amplify-space-xxs);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      align-items: center;
      justify-content: flex-start;

      &-icon {
        &--action-progress {
          animation-name: amplify-loader-circular;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
          animation-duration: var(
            --amplify-components-loader-animation-duration
          );
        }
      }
    }
  }

  &__status {
    display: flex;
    flex-direction: row;
    gap: var(--amplify-space-xs);
    align-items: center;

    &-display {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      gap: var(--amplify-space-small);
      flex: 1;
    }

    &-label {
      font-weight: var(--amplify-font-weights-bold);
    }

    &-value {
      color: var(--amplify-colors-font-secondary);
    }
  }

  &__destination {
    display: flex;
    flex-direction: row;
    gap: var(--amplify-space-xs);
    align-items: center;

    &-label {
      font-weight: var(--amplify-font-weights-bold);
    }

    &-value {
    }
  }

  &__message {
    flex: 1;
  }

  &__buttons {
    justify-content: flex-end;
    display: flex;
    gap: var(--amplify-space-small);
  }

  &__loader {
    position: absolute;
    stroke-width: var(--amplify-border-widths-large);
    height: var(--amplify-border-widths-large);
    top: 0;
    z-index: 3;
  }

  &__content-with-preview {
    display: flex;
    height: 100%;
  }

  &__file-preview {
    overflow: auto;
    flex: 1;
    width: 50%;
    position: sticky;
    top: 10px;
    bottom: 10px;
    height: fit-content;
    max-height: calc(100svh - 20px);
    padding: var(--amplify-space-medium);
    border: var(--amplify-border-widths-small) solid
      var(--amplify-colors-border-primary);
    border-radius: var(--amplify-radii-small);
    margin-inline-start: var(--amplify-space-large);
    padding-block-end: var(--amplify-space-large);

    &-header {
      margin-block-end: var(--amplify-space-medium);
      display: flex;
      justify-content: flex-end;
    }

    &-container {
      display: flex;
      flex-direction: column;
      gap: var(--amplify-space-large);
    }

    &-content {
      display: flex;
      flex-direction: column;
      gap: var(--amplify-space-large);
      align-items: center;
    }

    &-section {
      display: flex;
      flex-direction: column;
      min-height: 400px;
      flex: 1;
    }

    &-title {
      margin-block-end: var(--amplify-space-medium);
      color: var(--amplify-colors-font-primary);
      font-size: var(--amplify-font-sizes-large);
      font-weight: var(--amplify-font-weights-semibold);
      flex-shrink: 0;
    }
  }

  &__file-metadata {
    display: grid;
    gap: var(--amplify-space-small);
    background-color: var(--amplify-colors-background-secondary);
    padding: var(--amplify-space-medium);
    border-radius: var(--amplify-radii-small);
    border: var(--amplify-border-widths-small) solid
      var(--amplify-colors-border-secondary);

    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-block: var(--amplify-space-xs);
      border-block-end: var(--amplify-border-widths-small) solid
        var(--amplify-colors-border-secondary);

      &:last-child {
        border-block-end: none;
      }
    }

    &-label {
      font-weight: var(--amplify-font-weights-medium);
      color: var(--amplify-colors-font-primary);
      margin: 0;
    }

    &-value {
      color: var(--amplify-colors-font-secondary);
      margin: 0;
      word-break: break-all;
      text-align: end;
      max-width: 60%;
    }
  }

  &__preview-fallback {
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--amplify-space-medium);
    background-color: var(--amplify-colors-background-secondary);
    border: var(--amplify-border-widths-small) dashed
      var(--amplify-colors-border-secondary);
    border-radius: var(--amplify-radii-small);
    padding: var(--amplify-space-large);
    text-align: center;

    &--error {
      color: var(--amplify-colors-font-error);
      background-color: var(--amplify-colors-background-error);
      border-color: var(--amplify-colors-border-error);
    }

    &--default {
      color: var(--amplify-colors-font-secondary);
      background-color: var(--amplify-colors-background-secondary);
      border-color: var(--amplify-colors-border-secondary);
    }

    &-icon {
      font-size: var(--amplify-font-sizes-xxxxl);
      margin-block-end: var(--amplify-space-xs);
    }

    &-title {
      font-weight: var(--amplify-font-weights-bold);
      font-size: var(--amplify-font-sizes-large);
      margin-block-end: var(--amplify-space-xs);
    }

    &-description {
      font-size: var(--amplify-font-sizes-small);
      margin-block-end: var(--amplify-space-xs);
    }

    &-filename {
      font-size: var(--amplify-font-sizes-xs);
      font-family: var(--amplify-fonts-monospace), monospace;
    }

    &-actions {
      display: flex;
      gap: var(--amplify-space-small);
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  &__preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--amplify-space-medium);
    height: 400px;
    width: 100%;

    &-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--amplify-space-small);
      width: 100%;
    }

    &-info {
      color: var(--amplify-colors-font-secondary);
      font-size: var(--amplify-font-sizes-small);
      text-align: center;
    }
  }

  &__text-container {
    display: flex;
    flex-flow: column nowrap;
    gap: 8px;
    align-items: center;
  }

  &__text-preview {
    height: 400px;
    width: 100%;
    display: block;
    background-color: var(--amplify-colors-background-secondary);
    border: var(--amplify-border-widths-small) solid
      var(--amplify-colors-border-secondary);
    border-radius: var(--amplify-radii-small);
    padding: var(--amplify-space-medium);
    font-family: var(--amplify-fonts-monospace), monospace;
    font-size: var(--amplify-font-sizes-small);
    line-height: 1.5;
    overflow-y: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
  }

  &__video-container {
    display: flex;
    flex-flow: column nowrap;
    gap: 8px;
    align-items: center;
  }

  &__video-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 400px;
    border-radius: var(--amplify-radii-small);
    background-color: var(--amplify-colors-background-secondary);
    flex-shrink: 0;

    video {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
    }
  }

  &__image-container {
    display: flex;
    flex-flow: column nowrap;
    gap: 8px;
    align-items: center;
  }

  &__image-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    width: 100%;
    background-color: var(--amplify-colors-background-secondary);
    border-radius: var(--amplify-radii-small);
    flex-shrink: 0;
    flex-flow: column nowrap;
    gap: 8px;

    img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: var(--amplify-radii-small);
    }
  }

  &__download-button {
    display: flex;
    flex-flow: row nowrap;
    gap: 8px;

    &_icon {
      animation-delay: 0s;
      animation-direction: normal;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-name: spin;
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
